<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#bigbox{ width:420px; height:272px; position:relative; margin:0 auto;}
.mask{ display:block; position:absolute; width:420px; height:120px; background:#000; opacity:0.4; left:0; bottom:0; }
ul{ list-style:none; width:660px; position:absolute;}
#scrollBox{width:300px;position:absolute; height:62px; left:10px; bottom:30px;overflow:hidden;}
#btn{ width:30px; height:30px; background-color:#09F; display:block; color:#fff; cursor:pointer; text-align:center; line-height:30px;
position:absolute; left:320px; bottom:40px; border-radius:4px;}
ul img{ width:88px; border:2px solid #ccc; margin:2px;}
ul .cur{ border:2px solid #0CF;}
li{ float:left;}
#text{ border:1px solid #ccc; width:100px; position:absolute; left:800px; top:100px; background:#fff;}
#blue{ width:40px; height:40px; display:block; cursor:pointer; background:blue;}
#green{ width:40px; height:40px; display:block; cursor:pointer; background:green;}
#black{ width:40px; height:40px; display:block; cursor:pointer; background:black;}
#orange{ width:40px; height:40px; display:block; cursor:pointer; background:orange;}
#red{ width:40px; height:40px; display:block; cursor:pointer; background:red;}
#color span{ margin:10px; float:left; box-shadow:0 0 10px #434343;}
#color{ margin-left:750px;}
input{ margin-left:750px; width:200px; height:30px; border-radius:4px; margin-top:10px; text-indent:12px; outline:none;}
</style>
</head>

<body>
<div id="bigbox">
	<img src="img/1.jpg" alt="">
    <span class="mask"></span>
    <div id="scrollBox">
        <ul>
            <li><img class="cur" value="1" src="img/1.png"></li>
            <li><img value="2" src="img/2.png"></li>
            <li><img value="3" src="img/3.png"></li>
            <li><img value="4" src="img/4.png"></li>
            <li><img value="5" src="img/5.png"></li>
            <li><img value="6" src="img/6.png"></li>
            <li><img value="7" src="img/7.png"></li>
        </ul>
    </div>
    <span id="btn">&gt;&gt;</span>
</div>
<div id="text">切换文字</div>
<input type="text" name="text">
<div id="color">
	<span id="blue"></span>
    <span id="green"></span>
    <span id="black"></span>
    <span id="orange"></span>
    <span id="red"></span>
</div>
<script>
$(function(){
	$("input").keyup(function(){
		//alert()
		$("#text").html($("input").val());
	});
	
	$("#color span").click(function(){
		var val=$(this).get(0).id;
		console.log(val)
		$("#text").css({color:val});
	});
	var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
	var timer=null;
	$("#text").draggable();
	$("#btn").click(function(){
		$("ul").animate({"left":"-94px"},function(){
			$(this).css({"left":0});
			$("li").first().insertAfter($("li").last());
		});	
	});	
	$("li img").mouseenter(function(){
		$("li img").removeClass("cur");
		$(this).addClass("cur");
		$("img").first().attr("src",arr[$(this).attr("value")-1]);
	});
	/*var n=0;
	timer=setInterval(move,2000);
	
	function move(){
		n++;
		if(n>=6){
			n=0;	
		}
		$("li img").removeClass("cur");
		$("li img").eq(1).addClass("cur");
		$("ul").animate({"left":"-94px"},function(){
			$(this).css({"left":0});
			$("li").first().insertAfter($("li").last());
		});	
		$("img").first().attr("src",arr[n]);
	}
	
	$("li").hover(function(){
		clearInterval(timer);	
	},function(){
		timer=setInterval(move,2000);	
	});
	$("#btn").hover(function(){
		clearInterval(timer);
	},function(){
		timer=setInterval(move,2000);	
	});*/
});
</script>
</body>
</html>
